
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <!-- 移动端设置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>登录</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
</head>

<body>
<div id="app" class="container" style="margin:200px auto;">
    <div class="row">
        <div class="col-md-4" style="margin:0 auto;">
            <div class="form">
                <div class="form-group">
                    <label>用户名</label>
                    <input id="js-input-userName" type="text" class="form-control">
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input id="js-input-password" type="password" class="form-control">
                </div>
                <button id="js-btn-login" class="btn btn-info btn-block" style="margin-top:14px;">登录</button>
                <a href="/register" class="btn btn-light btn-block">注册</a>
            </div>
        </div>
    </div>
</div>
<script src="lib/jquery/jquery.js"></script>
<script src="js/util.js"></script>
<script>

    $(function () {

        $("#js-btn-login").click(function () {
            // 获取用户名(手机号/邮箱), 密码, 票据
            var userName = $("#js-input-userName").val().trim();
            var password = $("#js-input-password").val();
            if (!userName || !password) {
                alert("请输入账号密码");
                return false;
            }

            $.ajax({
                url: "/api/user/login",
                type: "POST",
                data: { "userName": userName, "password": password},
                dataType: "json",
                success: function (data, status, xhr) {
                    if (data.code == -1) {
                        // 账号或密码错误
                        alert("账号或密码错误");
                    } else {
                        // 一切正确
                        localStorage.setItem("token", data.data);
                        // console.log(data, status, xhr);
                        // var cookie = xhr.getResponseHeader("Set-Cookie");
                        // if (cookie==null || cookie == "") {
                        //     cookie = xhr.getResponseHeader("Set-Cookie");
                        // }
                        // console.log(cookie);
                        // document.cookie = cookie;
                        // util.setCookie("token", data.data, 7); // TODO: 无效，需要 path, domain, 改为在服务端设置
                        // alert("登录成功: "+ util.getCookie("token"));
                        window.location.href = "/";
                    }
                }
            });
        });

    });
</script>
</body>

</html>